<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
</head>
<body>
<div id="app-1">
    message 信息为：{{message}},<br/>
    computed  reverMessage 信息为 {{reverMessage}}<br/>
    methods   reverMessage 信息为{{reverMessage1()}}<br/>
    <div id="demo">{{fullName}}</div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app-1',
        data:{
            message:'张三',
            firstName:'Foo',
            lastName:'Bar',
            fullName:'Foo Bar'
        },
        watch:{
            firstName:function (val) {
                this.fullName = val+ ' ' + this.lastName;
            },
            lastName:function (val) {
                this.fullName = val + ' ' + this.lastName;
            },
            fullName:function(val,e){
                console.log(val);
                console.log(e);
            }
        },
        computed:{
            reverMessage:function () {
                console.log("reverMessage is executed");
                return this.message.split('').reverse().join('');
            }
        },
        methods:{
            reverMessage1:function () {
                console.log("reverMessage1 is executed");
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>
</body>
</html>